<!doctype html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--====== USEFULL META ======-->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--====== TITLE TAG ======-->
<title>[[${title}]]</title>
	<link rel="shortcut icon" type="image/ico" th:href="@{/images/favicon.png}" href="images/favicon.png" />
	<!--====== STYLESHEETS ======-->
	<link rel="stylesheet" th:href="@{/css/font-awesome-min.css}" href="css/font-awesome-min.css">
	<link rel="stylesheet" th:href="@{/css/bootstrap-min.css}" href="css/bootstrap-min.css">
	<link rel="stylesheet" th:href="@{/css/normalize.css}" href="css/normalize.css">
	<link rel="stylesheet" th:href="@{/css/animate.css}" href="css/animate.css">
	<link rel="stylesheet" th:href="@{/css/lity.css}" href="css/lity.css">
	<link rel="stylesheet" th:href="@{/css/slick-nav.css}" href="css/slick-nav.css">
	<link rel="stylesheet" th:href="@{/css/slick-slider.css}" href="css/slick-slider.css">
	<link rel="stylesheet" th:href="@{/css/theme.css}" href="css/theme.css">
	<!--====== MAIN STYLESHEET ======-->
	<link th:href="@{/style.css}" href="style.css" rel="stylesheet">
	<link th:href="@{/css/responsive.css}" href="css/responsive.css" rel="stylesheet">
	<script th:src="@{/js/vendor/modernizr.js}" src="js/vendor/modernizr.js"></script>

</head>

<body data-spy="scroll" data-target=".mainmenu-area" data-offset="50">


<!-- Page cursor -->
<div class='cursor' id="cursor"></div>
<div class='cursor2' id="cursor2"></div>
<div class='cursor3' id="cursor3"></div>
<!-- Preloader-Content -->

<!-- Popup-Search-Form -->

<!-- Popup-Search-Form-End -->
<!-- Full-Wrapper-Start -->
<div class="full-wrapper">

	<!-- Mainmenu-Area-Start -->
	<div th:replace="~{commons/bar :: topbar}"></div>
	
	<div class="live_wrap">
		<div class="u_header">
			<h1>个人中心</h1>
		</div>

		<div>
			<div th:replace="~{commons/bar :: left}"></div>
			
			
			<div class="u_mainbody" style="overflow: inherit;">
				<div class="user_myprofile changepwd_page">	
					<ul class="clearfix nobase" >
						<span>当前位置：</span>
						<a href="#">我的资料</a>
						<span> 〉</span>
						[[${text}]]
					</ul>
					<div class="myprofile_main clearfix data_cont phoneOver" id="js_phone_div">
						<div class="boundPhoneTips">
							<span></span>
							为了您的帐号安全，请先验证所绑定的[[${text1}]]
						</div>
						<div class="control_group mb30 clearfix">
							<label class="control-label fl">[[${text1}]]：</label>
							<div class="control" style="width:500px;">
								<div class="input_prepend">
									<input th:value="${number}" th:readonly="${readonly}" th:attr="qq='true'" id="phone" type="text"  />
									<span id="number"></span>
								</div>

							</div>
						</div>
						<div class="control_group mb30 clearfix">
							<label class="control-label fl">验证码：</label>
							<div class="control" style="width:500px;">
								<div class="input_prepend">
									<input th:attr="qq='true'" type="text" id="qwer" size="4" maxlength="6" />
									<img id="img" onclick="Code()" src="/captcha/2" alt="">
									<span id="yzm"></span>
								</div>
							</div>
						</div>
						<div class="control_group mb30 clearfix email_box">
							<label class="control-label fl">邮箱验证码：</label>
							<div class="control">
								<div class="input_prepend">
									<input style="text-indent: 0;" id="yzm1" th:attr="qq='true'" type="text" class="form_control fl inputaaa"  maxlength="6"  />
									<input type="button"  id="btn1"  class="email_btn fl js_sendemail" value="发送验证码" />
									<span id="email1"></span>
								</div>
							</div>
						</div>
						<div class="largeBtn">
							<label class="control-label"></label>
							<button th:attr="email=''" class="primary_button01" >
								<span>下一步</span>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>

	<form id="form1" th:action="@{${uri}}" method="post">
		<input id="input1" th:name="${name}" type="hidden">
	</form>
	<form id="zx" action="/mylogout" th:action="@{/mylogout}" th:method="post">

	</form>
	
	<footer style="position: fixed;" class="footer-area rboom">
		
		<div class="footer-bottom">
			<div class="container">
				<div class="row">
					<div class="col-lg-6 offset-lg-3 text-center">
						<div class="copyright">
							<p>Copyright &copy; 2020. Bi Jia Wang All rights reserved.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
</div>
<!-- Full-Wrapper-End -->
<script th:src="@{/js/vendor/jquery-min.js}" src="js/vendor/jquery-min.js"></script>

<!--=======  PLUGINS =======-->
<script th:src="@{/js/popper-min.js}" src="js/popper-min.js"></script>
<script th:src="@{/js/bootstrap-min.js}" src="js/bootstrap-min.js"></script>
<script th:src="@{/js/lity-min.js}" src="js/lity-min.js"></script>
<script th:src="@{/js/slick-slider-min.js}" src="js/slick-slider-min.js"></script>
<script th:src="@{/js/slick-nav.js}" src="js/slick-nav.js"></script>
<script th:src="@{/js/wow-min.js}" src="js/wow-min.js"></script>

<!--=======  PLUGINS =======-->


<script>
	function abc() {
		$("#zx").submit();
	}

	$("#qwer").blur(qq);
	$("#phone").blur(isPhone);
	function isPhone() {
		str = $("#phone").val();
		var reg =  /^1\d{10}$/;
		if (!reg.test(str)) {
			$("#number").html("<font color='red'>手机号码格式错误</font>");
			return false;
		} else {
			$.ajax({
				type:'GET',
				url:'/checkPhonename/' + str,
				success:function (text) {
					if (text === "true"){
						$("#number").html("<font color='red'>该手机号没注册</font>");
						$("#phone").attr("qq",'false');
					}else {
						$("#number").html("");
						$("#phone").attr("qq",'true');
					}
				}
			});
			return $("#phone").attr("qq") === "true";
		}
	}

	function qq() {
		var code2 = $("#qwer").val();
		if (code2 === ""){
			$("#yzm").html("<font color='red'>请输入验证码</font>");
			return false;
		}else {
			$.ajax({
				type: "GET",
				url: "/verify",
				data: 'code=' + code2,
				success: function (text) {
					if (text === "true") {
						$("#yzm").html("");
						$("#qwer").attr("qq",'true');
					} else {
						$("#yzm").html("<font color='red'>验证码不正确</font>");
						$("#qwer").attr("qq",'false');
					}
				}
			});
			return $("#qwer").attr("qq") === "true";
		}
	}
	function Code() {
		document.getElementById("img").src="/captcha/"+Math.random();
	}

	$(document).ready(function(){
		$(".email_btn").click(function () {
			if (isPhone() && qq()){
				var nubmer = $("#phone").val();
				$.ajax({
					type:"GET",
					url:"/sendEmail/" + nubmer,
					success:function (text) {
						$(".primary_button01").attr("email",text);
					}
				});
				alert("邮件已发送,5分钟有效！");
			}else{
				alert("输入正确的信息");
				return false;
			}
		});

		$(".primary_button01").click(function () {
			var val = $("#yzm1").val();
			if (val.length === 0){
				$("#email1").html("<font color='red'>请输入验证码</font>")
			}else{
				var email =$(".primary_button01").attr("email");
				if (email.length === 0){
					alert("请发送验证码");
				}else {
					$.ajax({
						type: "GET",
						url: "/change/checkCode/" + val + "/" + email,
						success: function (text) {
							if (text === "true") {
								var number = $("#phone").val();
								$("#input1").val(number);
								$("#form1").submit();
							} else {
								$("#email1").html("<font color='red'>验证码不正确</font>")
							}
						}
					});
				}
			}
		});


		$(".primary_button01").hover(function () {
			$(this).css("background-color", "#FF7700")
		},function () {
			$(this).css("background-color", "#FEA01E")
		});


		$("#btn1").hover(function(){
			$(this).css("background-color", "#1691DA")
		},function(){
			$(this).css("background-color", "#4EBCFF")
		});
	});
</script>
<!--=======  ACTIVE JS =======-->


</body>


</html>
